<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>TREE</title>
		<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
		<script src="ext/adapter/ext/ext-base.js"></script>
		<script src="ext/ext-all.js"></script>
		<script src="ext/src/locale/ext-lang-zh_CN.js"></script>	
		<script>
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL='../ext-3.2.1/resources/images/default/s.gif';
			var thenode;
			var tree = new Ext.tree.TreePanel({
				el:'tree',
				frame:true,
				autoScroll: true,
				animate:true,
				enableDD: true,
				containerScroll:true,
				rootVisible:true,
				border:true,
			    loader:new Ext.tree.TreeLoader({dataUrl:'tree.jsp'})
			});
			
			var root = new Ext.tree.AsyncTreeNode({
				id:'0',
				text:'我是跟节点'
			});
			tree.setRootNode(root);
			tree.render();
			tree.expand(false,false);
			
			
			
			new Ext.Viewport({
			    layout: 'border',
			    items: [{
			        region: 'west',
			        collapsible: true,
			        title: 'Navigation',
			        xtype: 'treepanel',
			        width: 200,
			        el:'tree',
					frame:true,
					autoScroll: true,
					animate:true,
					enableDD: true,
					containerScroll:true,
					rootVisible:true,
					border:true,
				    loader:new Ext.tree.TreeLoader({dataUrl:'tree.jsp'}),
					//loader: 'tree.txt',
			        root: root,
			       
			    }, {
			        region: 'center',
			        xtype: 'tabpanel'
			        // remaining code not shown ...
			    }]
			});
			
			var root = new Ext.tree.AsyncTreeNode({
				id:'0',
				text:'我是跟节点'
			});
			
			
			
			
			var contextmenu=new Ext.menu.Menu({
				id:'contextmenu',
				items:[
					{
						text:'选定',
						handler:function(node){
							Ext.Msg.alert('选的节点是',thenode.text);
						}
					},
					{
						text:'增加',
						handler:function(node){
							var nodex = new Ext.tree.TreeNode({text:'我是新的'});
							thenode.appendChild(nodex);
						}
					},
					{
						text:'删除',
						handler:function(node){
							thenode.remove();
						}
					},
					{
						text:'修改',handler:function(){//使节点处于可编辑状态
							thenode.setText('修改的');//thenode.attributes.text 子节点的内容（文本）
						}
					}
					
				]
			});
			
			tree.on('contextmenu',function(node,e){
				e.preventDefault();//屏蔽掉系统浏览器菜单
				node.select();
				thenode=node;
				contextmenu.showAt(e.getXY());
			});
		});
	</script>
</head>
<body>
	<div id='tree'></div>
</body>
</html>	